<template>
  <div class="app">
    <h1>{{ msg }}</h1>
    <button @click="changeMsg">changeMsg</button>
    <Child></Child>
  </div>
</template>
<script setup>
import { reactive, toRef } from 'vue';
// 顶层写法可以不需要注册组件直接引入完毕即可渲染
// 顶层写法可以不需要在配置 setup 的 return
import Child from './Child.vue';
const data = reactive({
  msg: 'hello vue',
});

const msg = toRef(data, 'msg');
const changeMsg = () => {
  data.msg = '更新了';
  console.log(data.msg);
};
</script>
<style lang="scss" scoped></style>
